<template>
  <el-header class="header">
    <!--前进后退按钮-->
    <span class="navigation" @click="goBack" :class="{disabled: $store.state.index===0}">
      <span class="el-icon-arrow-left" style="font-weight: 1000;color: var(--deepText)"/>
    </span>
    <span class="navigation" @click="goForward"
          :class="{disabled: $store.state.index === $store.state.visitedRoutes.length-1}">
      <span class="el-icon-arrow-right" style="font-weight: 1000;color: var(--deepText)"/>
    </span>
    <div style="margin-left: auto;display: flex;flex-direction: row">
      <!--个人中心-->
      <span @click="$router.push('/mine')" class="navigation"
            :style="$route.path.endsWith('/mine') ? 'background-color: var(--btn);padding: 0 3px 0 9px' : 'padding: 0 3px 0 9px'">
              <svg style="padding: 8px 0 0 0" t="1690971327305" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="6619" width="20" height="20"><path
                  d="M965.782426 977.682694l0.047323 0c-0.071488-0.73804-0.189293-1.465005-0.263802-2.208079l-0.147004-1.481115c0-3.579444-0.504445-7.01994-1.279739-10.365789C943.303918 800.569168 837.107693 664.39925 691.90207 601.698057c84.040924-57.741321 139.211691-154.729665 139.211691-264.689592 0-177.046066-142.975393-320.567186-319.343831-320.567186-176.370452 0-319.345845 143.522127-319.345845 320.567186 0 109.996175 55.209028 207.016738 139.298282 264.748998-143.914809 62.204803-249.521004 196.572413-271.591727 357.763201-1.531458 4.574238-2.552431 9.381064-2.552431 14.47183l0.364489 3.681139c0 0.008055 0 0.008055 0 0.008055l0 0 0.054371 0.551768c0 25.250438 20.387226 45.714187 45.531942 45.714187s45.529929-20.463749 45.529929-45.714187l-0.055378-0.551768 0.92834 0c21.254147-174.735285 165.057192-311.431799 342.557359-320.740369 6.38158 0.380599 12.799408 0.633325 19.28067 0.633325 6.492337 0 12.922247-0.252726 19.316917-0.640373 177.513256 9.290445 321.336439 145.999042 342.59562 320.747417l1.027014 0 0.054371 0.551768c0 25.250438 20.387226 45.714187 45.544025 45.714187 25.144716 0 45.531942-20.463749 45.531942-45.714187L965.782426 977.682694zM283.585635 337.101098c0-126.461619 102.116363-228.982746 228.098709-228.982746 125.981339 0 228.108778 102.522134 228.108778 228.982746 0 119.397377-91.067912 217.344266-207.269464 227.925527-6.841723-0.309111-13.7207-0.492362-20.64398-0.492362-7.007857 0-13.980474 0.184258-20.914829 0.497397C374.708925 554.505776 283.585635 456.540763 283.585635 337.101098z"
                  p-id="6620" fill="currentColor"
                  :color="$route.path.endsWith('/mine') ? 'var(--btnText)' : 'var(--deepText)'"></path></svg>
        </span>
      <!--信息通知-->
      <el-popover
          placement="bottom"
          :append-to-body="false"
          :close-delay="0"
          width="400"
          trigger="hover"
          ref="pop">
        <span
            style="display: flex;justify-content: center;font-weight: bold;font-size: 20px;letter-spacing: 3px">消息列表</span>
        <el-divider/>
        <div v-for="msg in messageList" :key="msg.id" style="display: flex;flex-direction: column">
          <span style="font-weight: lighter;margin-bottom: 15px">{{ timeFormat(msg.createTime) }}</span>
          <span style="letter-spacing: 2px">{{ msg.name }}申请成为{{ msg.careHomeName }}的{{ role(msg.role) }}</span>
          <div style="margin-top: 10px">
            <span class="bot" :style="botStyle(msg.status)"></span>
            <span style="font-weight: bold">{{ msg.status === null ? '待审核' : msg.status === 1 ? '已通过' : '已拒绝' }}</span>
          </div>
          <el-divider/>
        </div>
        <div style="margin: 30px auto 50px;font-size: 15px;font-weight: lighter;width: 70px;" v-if="messageList.length===0">
          暂无消息
        </div>
        <span @click="showAll" class="floatingBtn">查看全部</span>
        <span slot="reference" @click="$router.push('/message')" class="navigation"
              :style="$route.path.endsWith('/message') ? 'background-color: var(--btn);padding: 18px 7px 0 7px' : 'padding: 18px 7px 0 7px'">
          <svg style="font-weight: bolder;padding: 18px 0 2px 0" t="1691739734866" class="icon" viewBox="0 0 1024 1024"
               version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="2743" width="25" height="25"><path
              d="M821.333333 800H547.584l-86.464 96.074667a32 32 0 1 1-47.573333-42.816l96-106.666667A32 32 0 0 1 533.333333 736h288a53.333333 53.333333 0 0 0 53.333334-53.333333V234.666667a53.333333 53.333333 0 0 0-53.333334-53.333334H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333334v448a53.333333 53.333333 0 0 0 53.333334 53.333333h138.666666a32 32 0 0 1 0 64H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V234.666667c0-64.8 52.533333-117.333333 117.333334-117.333334h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333334v448c0 64.8-52.533333 117.333333-117.333334 117.333333zM704 341.333333a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h384zM512 512a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h192z"
              fill="currentColor" p-id="2744"
              :color="$route.path.endsWith('/message') ? 'var(--btnText)' : 'var(--deepText)'"></path></svg>
        </span>
      </el-popover>
      <!--退出登录-->
      <span @click="exit" class="navigation" style="padding: 0 2px 0 10px">
          <svg style="font-weight: bolder;padding: 9px 0 0 0" t="1690970902120" class="icon" viewBox="0 0 1024 1024"
               version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="3576" width="20" height="20"><path
              d="M885.9254784 537.4836736c0.21408427-0.24794453 0.4325376-0.49261227 0.64006827-0.74601813 0.2392064-0.29054293 0.4653056-0.58763947 0.6946816-0.88364374 0.14964053-0.1933312 0.30255787-0.3833856 0.44782933-0.57890133 0.24357547-0.32768 0.475136-0.66082133 0.70669653-0.99396267 0.1212416-0.17476267 0.24576-0.34624853 0.3637248-0.52210346 0.23156053-0.34515627 0.45110613-0.6946816 0.66955947-1.04420694 0.11031893-0.1769472 0.22391467-0.35170987 0.3309568-0.52974933 0.20753067-0.344064 0.40413867-0.69249707 0.5996544-1.0420224 0.11031893-0.19770027 0.22391467-0.39430827 0.3309568-0.59419307 0.17585493-0.32877227 0.34297173-0.66082133 0.50899627-0.99396266 0.11578027-0.23156053 0.2326528-0.4620288 0.344064-0.69577387 0.1441792-0.3047424 0.27962027-0.61166933 0.41506133-0.91859627 0.12014933-0.2719744 0.24139093-0.5439488 0.35607893-0.8192 0.11250347-0.27306667 0.21845333-0.54831787 0.3244032-0.8224768 0.12233387-0.31566507 0.24466773-0.63133013 0.35826347-0.950272 0.08628907-0.2424832 0.16602453-0.48605867 0.24685227-0.72963413 0.11905707-0.35498667 0.2359296-0.70888107 0.34515626-1.0682368 0.06444373-0.21517653 0.12342613-0.4325376 0.18459307-0.6488064 0.10922667-0.3866624 0.21736107-0.77441707 0.3145728-1.1665408 0.049152-0.19879253 0.0917504-0.3997696 0.13871787-0.5996544 0.09393493-0.40523093 0.1867776-0.81155413 0.26760533-1.22115413 0.04041387-0.20534613 0.07318187-0.41069227 0.11031893-0.61713067 0.0720896-0.4030464 0.14527147-0.80500053 0.20425387-1.212416 0.03495253-0.2392064 0.06007467-0.4784128 0.0917504-0.71871147 0.04805973-0.3735552 0.098304-0.74601813 0.1343488-1.1239424 0.03167573-0.3178496 0.049152-0.63788373 0.07318187-0.9568256 0.02184533-0.3014656 0.05024427-0.60183893 0.06444373-0.90548906a38.23588693 38.23588693 0 0 0 0-3.7781504c-0.01529173-0.30365013-0.0425984-0.60402347-0.06444373-0.90548907-0.0229376-0.31894187-0.04150613-0.638976-0.07318187-0.9568256-0.03713707-0.376832-0.08738133-0.74929493-0.1343488-1.12285013-0.03058347-0.2392064-0.0557056-0.47950507-0.0917504-0.71871147a40.00535893 40.00535893 0 0 0-0.20425387-1.21132373c-0.03713707-0.2064384-0.06990507-0.4128768-0.11031893-0.61822294a37.92022187 37.92022187 0 0 0-0.26760533-1.22115413c-0.0458752-0.1998848-0.0884736-0.40086187-0.13871787-0.5996544a37.36753493 37.36753493 0 0 0-0.3145728-1.1665408c-0.06116693-0.2162688-0.11905707-0.43362987-0.18459307-0.6488064a39.17851307 39.17851307 0 0 0-0.344064-1.06714453c-0.08192-0.24357547-0.1605632-0.4882432-0.24685226-0.7307264-0.11359573-0.31894187-0.2359296-0.63460693-0.35826347-0.950272-0.10594987-0.2752512-0.21189973-0.5505024-0.3244032-0.82356907a36.35063467 36.35063467 0 0 0-0.35607893-0.8192c-0.13544107-0.30692693-0.27088213-0.61494613-0.41506134-0.91859627-0.1114112-0.23374507-0.22828373-0.46421333-0.344064-0.6946816-0.16602453-0.33314133-0.33314133-0.66628267-0.51008853-0.9961472-0.10704213-0.19879253-0.2195456-0.39540053-0.32986453-0.59200853-0.19551573-0.34952533-0.39212373-0.69905067-0.5996544-1.04311467-0.10704213-0.17803947-0.22063787-0.35280213-0.32986454-0.52865706-0.2195456-0.3506176-0.4390912-0.7012352-0.67065173-1.04639147-0.11687253-0.17476267-0.24139093-0.34515627-0.36154027-0.5177344a36.81375573 36.81375573 0 0 0-0.70997333-0.99833173c-0.1441792-0.19442347-0.29600427-0.38229333-0.44455253-0.57344-0.23046827-0.2981888-0.45765973-0.5963776-0.69905067-0.88910507-0.20534613-0.25012907-0.42161493-0.49261227-0.63351467-0.73728-0.19442347-0.22500693-0.3833856-0.45329067-0.58436266-0.6750208a38.32763733 38.32763733 0 0 0-1.28232107-1.34894933l-0.02184533-0.0229376-177.6386048-177.6418816c-14.9291008-14.9291008-39.1348224-14.9291008-54.0639232 0s-14.9291008 39.1348224 0 54.0639232L764.71773867 474.26000213H431.02808747c-21.11351467 0-38.22933333 17.11581867-38.22933334 38.22933334s17.11581867 38.22933333 38.22933334 38.22933333H764.71773867L652.3387904 663.09761707c-14.9291008 14.9291008-14.9291008 39.1348224 0 54.0639232s39.1348224 14.9291008 54.0639232 0l177.64078933-177.64078934a38.67716267 38.67716267 0 0 0 1.3041664-1.37188693c0.19879253-0.21736107 0.38557013-0.44346027 0.57780907-0.6651904z"
              fill="currentColor" color="var(--deepText)" p-id="3577"></path><path
              d="M434.97772373 864.6885376h-243.57546666v-703.41973333h243.57546666c23.52633173 0 42.5984-19.07206827 42.5984-42.5984s-19.07206827-42.5984-42.5984-42.5984h-286.17386666c-23.52633173 0-42.5984 19.07206827-42.5984 42.5984v788.61653333c0 23.52633173 19.07206827 42.5984 42.5984 42.5984h286.17386666c23.52633173 0 42.5984-19.07206827 42.5984-42.5984s-19.07206827-42.5984-42.5984-42.5984z"
              fill="currentColor" color="var(--deepText)" p-id="3578"></path></svg>
        </span>
      <!--切换主题-->
      <span @click="changeTheme" class="navigation" style="padding: 0 3px 0 9px">
          <span v-if="currentTheme" class="el-icon-sunny"
                style="font-size: 20px;font-weight: 1000;color: var(--deepText)"></span>
          <span v-else class="el-icon-moon" style="font-size: 20px;font-weight: 1000;color: var(--deepText)"></span>
        </span>
    </div>

  </el-header>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Header",
  data() {
    return {
      //当前主题
      currentTheme: localStorage.getItem('theme') == null ? false : JSON.parse(localStorage.getItem('theme')),
      //获取到的消息列表
      messageList: [],
      //用户信息
      user: {}
    }
  },
  methods: {
    //前进后退按钮方法
    goBack() {
      this.$store.commit("goBack")
    },
    goForward() {
      this.$store.commit("goForward")
    },
    //切换主题
    changeTheme() {
      //如果未保存过则直接存入false，即黑色主题
      if (localStorage.getItem('theme') == null) {
        localStorage.setItem('theme', 'false')
        this.$store.commit("setTheme")
        this.currentTheme = false
      } else {
        //如果保存过，则直接取反
        this.$store.commit("setTheme")
        let value = !JSON.parse(localStorage.getItem('theme').toString())
        localStorage.setItem('theme', value)
        this.currentTheme = value
      }
    },
    //退出登录
    exit() {
      localStorage.removeItem('user')
      this.$router.push('/home-page')
    },
    //根据用户role属性判断角色
    role(r) {
      if (r === 1) {
        return '管理员'
      } else if (r === 0) {
        return '老人'
      } else if (r === 2) {
        return '护工'
      } else {
        return '家属'
      }
    },
    //根据Date字符串返回可供显示的时间
    timeFormat(time) {
      let date = new Date(time)
      return date.getFullYear() + ' ' + this.zeroTool(date.getMonth() + 1) + '.' + this.zeroTool(date.getDate()) + ' ' + this.zeroTool(date.getHours()) + ':' + this.zeroTool(date.getMinutes());
    },
    //自动补零工具
    zeroTool(s) {
      s = s.toString()
      if (s.length === 1) {
        return '0' + s
      }
      return s
    },
    //获取消息列表
    getList() {
      this.request.get('/identity-verification/listByName', {
        params: {
          name: this.user.careHomeName
        }
      }).then(res => {
        if (res.code === '200') {
          //获取数据
          this.messageList = res.data.slice(0, 3)
        } else {
          this.$notify({
            type: 'error',
            title: '获取消息列表错误',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取消息列表错误',
          message: err
        })
      })
    },
    //跳转至信息页面
    showAll() {
      if(this.$route.path !== '/message'){
        this.$router.push('/message')
      }
      this.$refs.pop.doClose()
    },
    //样式颜色判断
    botStyle(status) {
      if (status === null) {
        return 'background: var(--btn)'
      } else {
        return status === 1 ? 'background: #25d120' : 'background: #ff6060'
      }
    },
  },
  mounted() {
    //先获取用户信息，如果没有就不做轮询
    let user = localStorage.getItem('user')
    if (user == null) {
      return
    }
    //如果存在用户信息，则为已登录状态，进行轮询
    this.user = JSON.parse(user)
    // //轮询消息列表
    this.getList()
    this.timer = window.setInterval(() => {
      setTimeout(() => {
        this.getList()
      }, 0)
    }, 5000)
  },
  destroyed() {
    window.clearInterval(this.timer)
  }
}
</script>

<style scoped>
.header {
  position: fixed;
  z-index: 1;
  height: 60px;
  display: flex;
  font-size: 20px;
  /*background-color: #006bad;*/
  border-bottom: solid 1px rgba(64, 64, 64, 0);
  width: 82%;
  padding-right: 18px;
}

.navigation {
  border-radius: 50%;
  background-color: var(--inputBg);
  width: 26px;
  height: 38px;
  margin: 10px 8px 10px 0;
  line-height: 40px;
  font-size: 15px;
  padding-left: 12px;
  cursor: pointer;
}

.navigation:hover {
  background-color: var(--btnHover);
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.disabled:hover {
  background-color: var(--inputBg);
}

/*弹出框样式*/
>>> .el-popover {
  background-color: var(--lightBg);
  color: var(--deepText);
  margin-right: 10px;
  border: 1px solid var(--inputBorder);
}

>>> .popper__arrow {
  display: none;
}

/*悬浮窗按钮*/
.floatingBtn {
  display: flex;
  margin: -10px auto 5px;
  justify-content: center;
  padding: 5px;
  background-color: var(--hover);
  width: 200px;
  border-radius: 5px;
  cursor: pointer;
}

.floatingBtn:hover {
  background-color: var(--btnHover);
}

/*圆点*/
.bot {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: black;
  margin-right: 8px;
}
</style>